<template>
  <div>
    <!--表格对象-->
    <Table
      :table="table"
      :isTreeTable="true"
      :tableColumns="tableColumns"
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      :pagination="false"
      :showTableCheckbox="false"
      :deleteMultipleSelectionUrl="$urls.API_URL_BACKSTAGE_DEPARTMENT_MANAGE"
      @addRow="addRow"
      @editRow="editRow"
    >
      <template #table_operator_left="scope">
        <el-button type="primary"  size="small" icon="Plus" plain @click="addRow(scope.row.id)">添加</el-button>
      </template>
    </Table>
  </div>
</template>

<script lang="ts" setup>
// 导入表格组件
import Table from '@/components/base/table/Table.vue';
import {
  defineProps, getCurrentInstance, ref,
} from 'vue';
// 导入element插件对象
import { ElMessage } from 'element-plus';
// 导入字典
import { yesOrNoDict } from '@/api/dict';
// 导入项目接口
import { TableColumn, TableData } from '@/types/interface/base_interface';
import { Role } from '@/types/interface/auth_interface';

const { proxy } = getCurrentInstance();

// 接收父组件传递过来的值
interface Props {// 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  table: TableData, // 表格对象，包含表格数据和分页信息。表格数据实际业务并不需要，偷懒写法
  loadTableList:()=>void, // 重新加载表格
  changePageSize:()=>void, // 当每页数据显示数发生变化时触发的一个函数
  changePage:()=>void, // 当页面发生变化时触发的一个函数
}
const props = defineProps<Props>();

// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([
  {
    label: '部门名称',
    prop: 'name',
    fixed: true,
    align: 'left',
  },
  {
    label: '员工人数',
    prop: 'userNumber',
    width: 120,
  },
  {
    label: '排序',
    prop: 'sort',
    width: 150,
  },
  {
    label: '创建时间',
    prop: 'createTime',
  },
]);

// 点击添加按钮，交由父组件处理
const addRow = (id:number) => { // id是部门的主键，表示在该部门下添加子部门信息
  proxy.$emit('addRow', id);
};

// 编辑按钮操作
const editRow = (row:Role):void => {
  proxy.$emit('editRow', row);
};
</script>
<style lang="scss" scoped>

</style>
